<template>
  <receipt-core
    @clear-open-json="clearOpenJson"
    @pose-edit-json="poseEditJson"
    @pose-submit-json="poseSubmitJson"
    @add-row-sub="addRowSub"
    @delete-row-sub="deleteRowSub"
    @json-format="jsonFormat"
    ref="idJsonItemsRefs"
    receipts-name="receipts"
    receipts-type="原料领料出库单"
    receipts-no="001"
  >
    //弹窗的主表的插入的idJson信息
    <template #idJsonSlot>
      <el-row>
        <el-col :span="12">
          <el-form-item label="类别号：" prop="categoryNo">
            <el-input v-model="idJsonItems.categoryNo"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="类名：" prop="categoryName">
            <el-input v-model="idJsonItems.categoryName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </template>
    //弹窗的子表的表格的插入的subJson信息
    <template #subJson>
      <el-table-column label="产品名称" min-width="180">
        <template #default="scope">
          <el-input v-model="subJsonItems[scope.$index].name"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="产品数量" min-width="180">
        <template #default="scope">
          <el-input v-model="subJsonItems[scope.$index].quality"></el-input>
        </template>
      </el-table-column>
    </template>
  </receipt-core>
</template>

<script lang="ts" setup>
import ReceiptCore from "@/components/receipt/ReceiptCore.vue";
import { provide, ref } from "vue";
import { ReceiptsSub } from "@/models/ReceiptsSub";

//传递到单据表中需要展示的列到ReceiptsTable
const receiptsTableFieldList = [
  {
    filedName: "idJson.categoryNo",
    label: "类别号",
    width: 220,
  },
  {
    filedName: "idJson.categoryName",
    label: "类名",
    width: 220,
  },
];
provide("receiptsTableFieldList", receiptsTableFieldList);

//传递idJson内的内容ReceiptsCore的Dialog内的插槽
const idJsonItems = ref({ categoryNo: null, categoryName: null } as unknown);
provide("idJsonItems", idJsonItems);

//传递subJson内的内容到ReceiptsCore的Dialog内的Table内的插槽
const subJsonItems = ref([
  { name: "null", quality: null },
  { name: null, quality: null },
  { name: null, quality: null },
  { name: null, quality: null },
  { name: null, quality: null },
] as Array<unknown>);
// provide("subJsonItems", subJsonItems);

//清空传递idJson内的内容ReceiptsCore的Dialog内的插槽内容
//清空传递subJson内的内容ReceiptsCore的Dialog内的Table内的插槽内容
const clearOpenJson = () => {
  idJsonItems.value = { categoryNo: null, categoryName: null };
  subJsonItems.value = [
    { name: null, quality: null },
    { name: null, quality: null },
    { name: null, quality: null },
    { name: null, quality: null },
    { name: null, quality: null },
  ];
};

//子组件编辑时将某行idJson传递回本父组件并导入插槽内
//子组件编辑时将某行receiptsSub传递回本父组件，然后取出subJson导入插槽内
const poseEditJson = (idJson: unknown, receiptsSub?: Array<ReceiptsSub>) => {
  idJsonItems.value = idJson;
  if (receiptsSub?.length === undefined || receiptsSub?.length === 0) {
    subJsonItems.value = [
      { name: null, quality: null },
      { name: null, quality: null },
      { name: null, quality: null },
      { name: null, quality: null },
      { name: null, quality: null },
    ];
  } else if (subJsonItems.value.length >= receiptsSub.length) {
    let i = 0;
    for (i; i < receiptsSub.length; i = i + 1) {
      subJsonItems.value[i] = receiptsSub[i].subJson;
    }
  } else {
    let j = subJsonItems.value.length;
    for (j; j < receiptsSub.length; j = j + 1) {
      subJsonItems.value.push({});
    }
    let i = 0;
    for (i; i < receiptsSub.length; i = i + 1) {
      subJsonItems.value[i] = receiptsSub[i].subJson;
    }
  }
};

//提交表单时将最新的ReceiptsSub传来处理，加入subJson后用callback返回
const poseSubmitJson = (
  callback: (value: Array<ReceiptsSub>) => void,
  no: string,
  receiptsSub: Array<ReceiptsSub>
) => {
  if (receiptsSub?.length === 0) {
    subJsonItems.value = [];
  } else {
    let i = 0;
    for (i; i < receiptsSub.length; i = i + 1) {
      receiptsSub[i].subJson = subJsonItems.value[i];
      receiptsSub[i].no = no;
    }
  }
  callback(receiptsSub);
};

const addRowSub = () => {
  subJsonItems.value.push({});
};
const deleteRowSub = (index: number) => {
  subJsonItems.value.splice(index, 1);
};

const jsonFormat = (
  data: Record<string, unknown>[][],
  callback: (value: Record<string, unknown>[]) => void
) => {
  let jsonList: Record<string, unknown>[] = [];
  for (let i = 0; i < data[0].length; i++) {
    // 存入字段名和excel表中的名称的映射，记得修改
    jsonList[i] = {};
    jsonList[i].no = data[0][i]["test1"];
    jsonList[i].name = data[0][i]["test2"];
    jsonList[i].description = data[0][i]["test3"];
    jsonList[i].departmentPhone = data[0][i]["test4"];
    jsonList[i].createUser = sessionStorage.getItem("token") as string;
    jsonList[i].createGmt = new Date();
  }
  callback(jsonList);
};
</script>

<style scoped></style>
